<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Restful web service</title>

<style type="text/css">
ul {list-style-type:none;}
</style>

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

</head>

<body>
<?php 
    if(!isset($_POST['submit']))
    {
?>
  <h1>Tesseract</h1>
 
	<form id="ocr" action="<?php echo  $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
 
	   <p>
		Select a image : <input type="file" name="file" id="file" size="45" />
	   </p>
	   
	   <p>
	   <ul id="displayimage"><li></li></ul>
	   </p>
				   <script>
			  function handleFileSelect(evt) {
				var files = evt.target.files; // FileList object

				  
				  f = files[0];
				  
				  if (!f.type.match('image.*')) {
					  document.getElementById('displayimage').removeChild(document.getElementById('displayimage').lastChild);
					  var span = document.createElement('li');
					  span.innerHTML = ['Only display image files'].join('');
					  document.getElementById('displayimage').insertBefore(span, null);
				  }
				  else {
                  // Only process image files.
				  var reader = new FileReader();

				  // Closure to capture the file information.
				  reader.onload = (function(theFile) {
					return function(e) {
					  // Render thumbnail.
					  document.getElementById('displayimage').removeChild(document.getElementById('displayimage').lastChild);
					  var span = document.createElement('li');
					  span.innerHTML = ['<img class="thumb" src="', e.target.result,
										'" title="', escape(theFile.name), '"/>'].join('');
					  document.getElementById('displayimage').insertBefore(span, null);
					};
				  })(f);

				  // Read in the image file as a data URL.
				  reader.readAsDataURL(f);
				}
			  }

			  document.getElementById('file').addEventListener('change', handleFileSelect, false);
			</script>
	   
	   
	   <p>
		Language : 
			<select name="lang" id = "lang">
  				<option value="eng">English</option>
  				<option value="vie">Vietnam</option>
			</select>
	   </p>
	   
	   
	   <input type="submit" name = "submit" value="Upload It" />
	   <img id="loading" src="ajax-loader.gif" alt="loading" style="display:none;"/>
	</form>
  
    <form action="">
    
    <textarea rows="25" cols="120" id="result" style="display:none;"></textarea>
     		<script>
     							$(document).ready(function(){
                                  	$('#ocr').submit( function() {
                                        var data = new FormData();
                                      	filesList = $('#file')[0].files;
    									data.append('file', filesList[0]);
    									data.append('lang',$("#lang").val());
    									$('#loading').show();
    									$("#result").hide();
    									$.ajax({
    									    url: 'submit.php',
    									    data: data,
    									    cache: false,
    									    contentType: false,
    									    processData: false,
    									    type: 'POST',
    									    success: function(result){
    									    	$("#result").show("slow");
    									    	$('#result').val(result);
    									    	$('#loading').hide();
    									    }
    									});
                                  		
                                  		return false;
                                	});
                            	 });
                                
            </script>
    </form>
<?php 	  
   } 
?>
</body>
</html>

